<template>
  <div class="layout">
    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
      <FormItem label="账号默认推荐人" class="label-item" prop="platformInviterId">
        <MemberSelecView v-model="formValidate.platformInviterId" :label="formValidate.platformInviterLabel" @select="handleMemberSelected">
        <!-- <span slot="append">天</span> -->
        </MemberSelecView>
        <span class="desc">注册无推荐人将默认使用当前设置推荐人</span>
      </FormItem>
      <FormItem label="优惠券不进行团队奖励" class="label-item" prop="noRewardCoupons">
        <CouponMultSelectView v-model="formValidate.noRewardCoupons" :label="formValidate.noRewardCouponsLabel" @selects="handleNoRewardCouponsSelect">
        <!-- <span slot="append">天</span> -->
        </CouponMultSelectView>
      </FormItem>

      <div class="label-btns">
        <Button type="primary" @click="submit('formValidate')">保存</Button>

      </div>
    </Form>
  </div>
</template>
<script>
import { setSetting } from "@/api/index";
import { handleSubmit } from "./validate";
    import MemberSelecView from '@/views/member/list/select-view/inputView.vue'
    import CouponMultSelectView from '@/views/promotions/coupon/select-view/multSelectView.vue'

export default {
    components: {
        MemberSelecView,
        CouponMultSelectView
    },
  data() {
    return {
      ruleValidate: {}, // 验证规则
      formValidate: { // 表单数据
        platformInviterId: "",
        platformInviterLabel: '',
        noRewardCoupons: "",
        noRewardCouponsLabel: "",
      },
      result: ""
    };
  },
  props: ["res", "type"],
  created() {
    this.init();
  },
  methods: {
    handleNoRewardCouponsSelect(arr=[]) {
        let noRewardCoupons = []
        let noRewardCouponsLabel = []
        if(Array.isArray(arr)) {
            arr.forEach(item=>{
                noRewardCoupons.push(item.id)
                noRewardCouponsLabel.push(item.couponName)
            })
        }
        this.$set(this.formValidate, 'noRewardCouponsLabel', noRewardCouponsLabel.join(','))
        this.$set(this.formValidate, 'noRewardCoupons', noRewardCoupons.join(','))
    },
    handleMemberSelected(row) {
        this.$set(this.formValidate, 'platformInviterId', row.id)
        this.$set(this.formValidate, 'platformInviterLabel', row.nickName)
    },
    // 保存
    submit(name) {
      let that = this;
      if (handleSubmit(that, name)) {
        this.setupSetting();
      }
    },
    // 保存设置
    setupSetting() {
      setSetting(this.type, this.formValidate).then((res) => {
        if (res.success) {
          this.$Message.success("保存成功!");
        } else {
          this.$Message.error("保存失败!");
        }
      });
    },
    // 实例化数据
    init() {
      this.result = JSON.parse(this.res);
      Object.keys(this.result).map((item) => {
        this.result[item] += "";
      });
      this.$set(this, "formValidate", {
        normalAutoReceive: '',
        virtualAutoReceive: '',
        ...this.result });
      Object.keys(this.formValidate).forEach((item) => {
        this.ruleValidate[item] = [
          {
            required: true,
            message: "请填写必填项",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error("不能输入负数！"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";

.label-item {
  display: flex;
}

.ivu-input-wrapper {
  width: 200px;
  margin-right: 10px;
}

::v-deep .ivu-input {
  width: 200px !important;
}

.desc {
  font-size: 12px;
  color: #999;
}
</style>
